<template>
  <div class="vita-slide-tabs">
    <div class="scroller-wrapper" v-el:scroller>
      <div class="scroller">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  
  import IScroll from 'iscroll'
  import _ from 'lodash'
  import $ from 'webpack-zepto'
  import ClassRegister from '../mixin/class-register'

  export default {

    mixins: [ ClassRegister ],

    data() {
      return {
        scroller: Object
      }
    },

    ready() {
      this._registerClassName('vita-content', 'has-slide-tabs')
      this.$nextTick(() => {
        let tabs = $(this.$els.scroller).find('.vita-tab')
        let total = _.reduce(tabs, (total, tab) =>  {
          if (typeof total == 'object') return $(total).width()
          return total + $(tab).width()
        })
        let $scroller = $(this.$els.scroller.querySelector('.scroller'))
        $scroller.width(total + 200)
        this.scroller = new IScroll(this.$els.scroller, { scrollX: true, scrollY: false })        
      })
    }

  }

</script>

